<template>
  <cj-popup v-model="showAddAliAccount" round :closeable="true" title="绑定支付宝账号" @close="closeDia">
    <div class="c-ww540 c-textAlign-c c-table">
      <div class="c-p c-bg-white c-br20 c-pb60 c-ph40">
        <div class="c-hh60 c-br10 c-flex-row c-flex-center theme-fc c-fs22 theme-bg-10 c-mt20 c-lh"><span class="iconfont c-fs22 c-mr4">&#xe652;</span>真实姓名要求与支付宝账号认证真名一致</div>
        <div class="c-pt40 c-pb20 c-bd-b1-f6 c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-xblack">真实姓名</span>
          <input v-model="realName" placeholder="请输入您的真实姓名" class="c-pl30 c-fs26 c-bd0 c-w0 c-flex-grow1 c-textAlign-r" />
        </div>
        <div class="c-pt40 c-pb20 c-bd-b1-f6 c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-xblack">支付宝账号</span>
          <input v-model="aliAccount" placeholder="请输入支付宝账号" class="c-pl30 c-fs26 c-bd0 c-w0 c-flex-grow1 c-textAlign-r" />
        </div>
        <div class="c-pt40 c-pb20 c-bd-b1-f6 c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-xblack">手机号</span>
          <input type="tel" :readonly="hasDefaultMobile" v-model="mobileNum" placeholder="请输入手机号" maxlength="13" :class="hasDefaultMobile ? 'c-fc-gray' : ''" class="c-pl30 c-fs26 c-bd0 c-w0 c-flex-grow1 c-textAlign-r" />
        </div>
        <div class="c-pt34 c-pb20 c-bd-b1-f6 c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-xblack">图形码</span>
          <input v-model="imgCode" placeholder="请输入图形码" class="c-pl30 c-fs26 c-bd0 c-w0 c-flex-grow1 c-textAlign-r" />
          <div class="c-flex-row c-ww130 c-hh48 c-ml20 c-justify-end">
            <img :src="$addXossFilter(codeImgInfo.img)" @click="getImgCode" class="c-w100 c-h" alt="">
          </div>
        </div>
        <div class="c-pt34 c-pb20 c-bd-b1-f6 c-flex-row c-aligni-center c-justify-sb">
          <span class="c-fs24 c-fc-xblack">验证码</span>
          <input type="tel" v-model="code" placeholder="请输入验证码" maxlength="4" class="c-pl30 c-fs26 c-bd0 c-w0 c-flex-grow1 c-textAlign-r" />
          <div @click="getYzcode" class="c-ww144 c-hh48 c-flex-row c-flex-center c-fs22 theme-fc theme-bd1 c-flex-shrink0 c-ml40 c-br24">{{yzText}}</div>
        </div>
        <div @click="submit" class="c-fs24 c-fc-white c-hh60 c-flex-row c-flex-center theme-bg c-br32 c-mt48">提交</div>
      </div>
    </div>
  </cj-popup>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: "AddAliAccountCom",
  props: {
    aliInfoDefault: {
      type: Object,
      default: null
    },
    showAddAliAccount: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      realName: '',
      aliAccount: '',
      mobileNum: '',
      imgCode: '',
      code:'',
      hasDefaultMobile: false,
      codeImgInfo: '',
      num: 60,
      interval: null,
      yzText: '',
      isLoading: false,
      isClick: false
    }
  },
  watch: {
    showAddAliAccount(val) {
      this.codeImgInfo = '';
      this.imgCode = '';
      this.num = 60;
      this.code = '';
      clearInterval(this.interval);
      this.yzText = "获取验证码";
      this.isLoading = false;
      this.isClick = false;
      this.getImgCode();
      this.realName = this.aliInfoDefault && this.aliInfoDefault.alipayUserName ? this.aliInfoDefault.alipayUserName : '';
      this.aliAccount = this.aliInfoDefault && this.aliInfoDefault.alipayAccount ? this.aliInfoDefault.alipayAccount : '';
      this.mobileNum = this.aliInfoDefault && this.aliInfoDefault.mobile ? this.aliInfoDefault.mobile : '';
      this.hasDefaultMobile = this.mobileNum ? true : false
    }
  },
  methods: {
    getImgCode() {
      if (this.isLoading == true) {
        return;
      }
      this.isLoading = true;
      utilJs.getMethod(`${global.apiurl}common/captcha`, res => {
        this.codeImgInfo = res;
        this.isLoading = false;
      }, failRes => {
        this.isLoading = false;
      });
    },
    closeDia() {
      this.$emit('closeDia')
    },
    getYzMethod: function () {
      this.num -= 1;
      this.yzText = this.num + "s后获取";
      if (this.num == 0) {
        clearInterval(this.interval);
        this.yzText = "获取验证码";
        this.num = 60;
        this.isClick = false;
      }
    },
    sendCode() {
      if (this.imgCode == '') {
        this.$showCjToast({
          text: "图片验证码不能为空",
          type: "warn",
        });
        this.isClick = false;
        return;
      }
      this.yzText = "发送中";
      utilJs.postMethod(global.apiurl + "members/sendCode", {
        mobile: this.mobileNum,
        captcha: this.imgCode,
        captchaKey: this.codeImgInfo.key,
      }, res => {
        if (res.errMsg) {
          this.yzText = "获取验证码";
          this.isClick = false;
          this.$showCjToast({
            text: res.errMsg,
            type: "warn",
          });
        } else {
          this.interval = setInterval(this.getYzMethod, 1000);
        }
      }, failRes => {
        clearInterval(this.interval);
        this.yzText = "获取验证码";
        this.num = 60;
        this.isClick = false;
      })
    },
    getYzcode: function () {
      if (this.isClick) {
        return;
      }
      this.isClick = true;
      if (!this.mobileNum) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        this.isClick = false;
        return
      }
      this.isClickCode = true;
      this.sendCode();
    },
    //检测提交
    checkSubmit() {
      if (!this.realName) {
        this.$showCjToast({
          text: "请输入真实姓名",
          type: "warn",
        });
        return false;
      } else if (!this.aliAccount) {
        this.$showCjToast({
          text: "请输入支付宝账号",
          type: "warn",
        });
        return false;
      } else if (!this.mobileNum) {
        this.$showCjToast({
          text: "手机号不能为空",
          type: "warn",
        });
        return false;
      } else if (!this.code) {
        this.$showCjToast({
          text: "验证码不能为空",
          type: "warn",
        });
        return false;
      } else {
        return true;
      }
    },
    submit() {
      if (!this.checkSubmit()) {
        return;
      }
      if (this.isLoading) {
        return;
      }
      this.isLoading = true;
      let postData = {
        'mobile': this.mobileNum,
        'code': this.code,
        'alipayAccount': this.aliAccount,
        'alipayUserName': this.realName
      };
      utilJs.postMethod(`${global.apiurl}alipay/saveAlipayAccount`, postData, (res) => {
        this.isLoading = false;
        this.$showCjToast({
          text: "添加成功",
          type: "success",
        });
        this.$emit('addAliPaySuccess', postData)
      }, (failRes) => {
        this.isLoading = false;
      });
    }
  },
  activated() {
  },
  deactivated() {
  }
};
</script>

<style scoped>
.m-auto {
  margin: auto;
}
</style>